<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动贴合</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container1::-webkit-scrollbar {
      width: 0;
    }

    .container1 {
      width: 100%;
      margin: 0 auto;
      height: 70vh;
      display: flex;
      overflow-x: scroll;
      /* x 方向，强制吸附 */
      scroll-snap-type: x mandatory;
    }


    .item {
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      /* 吸附对齐方式 */
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .container2 {
      width: 70%;
      height: 30vh;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-padding-top: 80px;
    }

    h2 {
      height: 80px;
      background-color: rgba(255, 255, 255, .5);
      position: sticky;
      top: 0;
      display: flex;
      padding-left: 32px;
      align-items: center;
      flex-shrink: 0;
    }
  </style>
</head>

<body>
  <div class="container1">
    <div class="item" style="background-image: url(https://picsum.photos/1600/500?random=1);"></div>
    <div class="item" style="background-image: url(https://picsum.photos/1600/500?random=2);"></div>
    <div class="item" style="background-image: url(https://picsum.photos/1600/500?random=3);"></div>
    <div class="item" style="background-image: url(https://picsum.photos/1600/500?random=4);"></div>
  </div>

  <div class="container2">
    <h2>标题</h2>
    <div class="item" style="background-image: url(https://picsum.photos/1000/400?random=1);">
    </div>
    <div class="item" style="background-image: url(https://picsum.photos/1000/400?random=2);">
    </div>
    <div class="item" style="background-image: url(https://picsum.photos/1000/400?random=3);">
    </div>
    <div class="item" style="background-image: url(https://picsum.photos/1000/400?random=4);">
    </div>
    <div class="item" style="background-image: url(https://picsum.photos/1000/400?random=4);">
    </div>
    <div class="item" style="background-image: url(https://picsum.photos/1000/400?random=4);">
    </div>
  </div>
</body>

</html>